<template>
  <div v-show="!isend" class="active-bar">
    <div class="top">
      <span>
        {{ type === 'group' ? `${data.group.p_num}人评团` : `${data[type].used_num}人已抢/剩${data[type].s_num}名` }}
      </span>

      <span>
        倒计时
        <CountDown :time="data[type].end_time" @end="isend = true" />
      </span>
    </div>
    <div class="bottom">
      <Price :value="data[type].price" class="text-xl"/>
      <Price :value="data.price" class="text-subtitle-2 ml-1" through/>
    </div>
  </div>
</template>

<script setup>

const props = defineProps({
  data: {
    type: Object,
    default: () => {
    }
  }
})

// 类型
const type = computed(() => props.data.group ? 'group' : 'flashsale');

const isend = ref(false);
</script>

<style scoped>
.active-bar {
  @apply w-[350px] mb-5;
}

.active-bar .top {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  @apply flex justify-between text-xs px-3 py-2 bg-red-500 text-white  ;
}

.active-bar .bottom {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  @apply border px-3 py-2 border-red-500;
}
</style>
